<template>
  <div class="demo">
    <ul class="tab-header">
      <li v-for="tab in tabs" :key="tab" :class="tab === active ? 'active' : ''" @click="() => (active = tab)">
        {{ tab }}
      </li>
    </ul>
    <keep-alive>
      <components :is="active" />
    </keep-alive>
  </div>
</template>

<script>
import gBasic from './components/basic'
import gForm from './components/form'
import gTable from './components/table'
const gTree = () => import('./components/tree')
export default {
  data() {
    return {
      active: 'gBasic',
      tabs: ['gBasic', 'gForm', 'gTable', 'gTree'],
    }
  },
  components: {
    gBasic,
    gForm,
    gTable,
    gTree,
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.tab-header {
  display: flex;
  li {
    list-style: none;
    border: 1px solid #ccc;
    margin-right: 8px;
    cursor: pointer;
    overflow: hidden;
    padding: 8px 16px;
    border-radius: 8px;
    &.active {
      color: #fff;
      background-color: #f60;
      border-color: #f60;
    }
  }
}
</style>
